<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../s/vue/2.7.16/vue.min.js"></script>
</head>
<body>

	<div id="example"></div>

	<script>
		//每个 Vue 实例都会代理其 data 对象里所有的属性

		var data = {
			a : 1
		}
		var vm = new Vue({
			el : '#example',
			data : data
		})
		console.log(vm.a === data.a);// -> true

		// 设置属性也会影响到原始数据
		vm.a = 2
		console.log(data.a);// -> 2

		// ... 反之亦然
		data.a = 3
		console.log(vm.a)// -> 3

		console.log(vm.$data === data); // -> true
		console.log(vm.$el === document.getElementById('example'));// -> true

		// $watch 是一个实例方法
		vm.$watch('a', function(newVal, oldVal) {
			// 这个回调将在 `vm.a`  改变后调用
			console.log({
				newVal : newVal,
				oldVal : oldVal
			});
		});
		vm.a = 0;
	</script>


</body>
</html>